<template>
	<div>
		<div class="popmodal-padding">
	        <div class="order-detail-item">订单编号：{{orderDetail.code}}</div>
	        <div class="order-detail-item">
	        	<div class="label-key">收获地址：</div>
	        	<div class="label-val">
	        		{{orderDetail.receiverAddress}}
	        	</div>
	        </div>
	        <div class="order-detail-item">&nbsp;&nbsp;收获人：{{orderDetail.receiverName}}</div>
	        <div class="order-detail-item">&nbsp;&nbsp;手机号：{{orderDetail.receiverPhone}}</div>
	        <div class="order-detail-item">支付时间：{{orderDetail.payTime}}</div>
	        <div class="order-detail-item">商品总价：{{orderDetail.productTotalPrice}}</div>
	        <div class="order-detail-item">邮费价格：{{orderDetail.postage}}</div>
	        <div class="order-detail-item">成交价格：{{orderDetail.transactionPrice}}</div>
	    </div>
	    <div class="logistic-item-info" v-for="(logisticItem, index) in goodsLogistics" :key="index">
	    	<productListItem v-for="(productItem, index) in logisticItem.logisticGoods"  :key="index" :productItem="productItem">
	    		{{productItem}}
            </productListItem>
            <div class="order-item-footer" v-if="logisticItem.code!='other'" style="text-align: left;">
	            <span class="cancel-btn" :class="[logisticItem.showLogistic ? 'down': '']" @click="openLogisticModal(logisticItem)">物流详情<i class="mint-cell-allow-right"></i></span>
	        </div>
	        <div v-if="logisticItem.code=='other'">
	        	<div class="no-logistic-tip">
	        		暂无物流信息
	        	</div>
	        </div>
        	<div class="van-steps van-steps--vertical" v-if="logisticItem.logistics.length && logisticItem.showLogistic">
        		<div class="van-steps__items van-steps__items--alone">
        			<div class="van-hairline van-step van-step--vertical van-step--process">
        				<div class="van-step__title" style="color: rgb(255, 68, 68);">
        					<div class="description">{{logisticItem.logistics[0].context}}</div>
        					<p>{{logisticItem.logistics[0].time}}</p>
        				</div>
        				<div class="van-step__circle-container">
        					<i class="van-icon van-icon-checked" style="color: rgb(255, 68, 68);"></i>
        				</div>
        				<div class="van-step__line"></div>
        			</div>
        			<div v-if="logisticItem.logistics&&logisticItem.logistics.length>1" v-for="(item, index) in logisticItem.logistics.slice(1)" :key="index" class="van-hairline van-step van-step--vertical van-step--process">
        				<div class="van-step__title">
        					<div class="description">{{item.context}}</div>
        					<p>{{item.time}}</p>
        				</div>
        				<div class="van-step__circle-container">
        					<i class="van-step__circle"></i>
        				</div>
        				<div class="van-step__line"></div>
        			</div>
	        	</div>
	        </div>
	        
	    </div>
    </div>
</template>
<script>
	import utils from '@utils'
	import { orderDetail, logisticsDetail} from '../api'
	export default {
	    name: 'orderDetail',
	    data() {
	        return {
	            orderDetail: {},
	            goodsLogistics: []
	        }
	    },
	    mounted() {
	        this.init();
	    },
	    methods: {
	        init() {
	        	this.$indicator.open({
		            spinnerType: 'fading-circle',
		            text: '加载中...'
		        });
	        	orderDetail({id: this.$route.query.id}).then((res) => {
	        		this.$indicator.close();
	                this.orderDetail = res;
	                var products = res.products;
	                var logisticMap = {};

	                for(var i=0;i<products.length;i++) {
	                	if(products[i].logistisCode) { 
		                	if(!logisticMap[products[i].logistisCode]) {
		                		logisticMap[products[i].logistisCode] = [];
		                	}
		                	logisticMap[products[i].logistisCode].push(products[i]);
	                	} else {
	                		if(!logisticMap["other"]) {
	                			logisticMap["other"] = [];
	                		}
	                		logisticMap["other"].push(products[i]);
	                	}
	                }
	                for(var attr in logisticMap) {
	                	this.goodsLogistics.push({
	                		code: attr,
	                		logisticGoods: logisticMap[attr],
	                		logistics: [],
	                		showLogistic: false
	                	})
	                }
	            });
	        },
	        goBackOrderList() {
	        	this.$router.go(-1);
	        },
	        openLogisticModal(logisticItem) {
	        	if(logisticItem.code !=="other") {
		        	logisticItem.showLogistic = !logisticItem.showLogistic
		        	if(!logisticItem.logistics || !logisticItem.logistics.length) {
		        		logisticsDetail(logisticItem.code)
			        	.then((res)=> {
			        		logisticItem.logistics = res.logistics;
			        	}).catch(err => {
			        		this.$toast(err.info);
			        	})

			        	/*logisticsDetail(9886800556150)
			        	.then((res)=> {
			        		logisticItem.logistics = res.logistics;
			        	})*/
		        	}
	        	} else {

	        	}
	        }
	    }
	}
</script>
<style>
	.logistic-item-info .order-item-footer .cancel-btn {
		position: relative;
		padding-right: 24px;
	}
	.logistic-item-info .order-item-footer .cancel-btn .mint-cell-allow-right::after {
		transition: transform 0.2s;
		right: 10px;
	}
	.logistic-item-info .order-item-footer .cancel-btn.down .mint-cell-allow-right::after{
		transform: translateY(-50%) rotate(135deg);
	}
	.order-detail-item {
	    line-height: 20px;
	    padding: 6px 0;
	    display: flex;
	}
	.order-detail-item .label-key {

	}
	.order-detail-item .label-val {
		flex: 1;
	}
	.popmodal-padding {
		margin-top: 4px;
		padding: 0 8px;
		background: #fff;
	}
	.van-steps {
	    overflow: hidden;
	    background-color: #fff;
	}
	.van-steps--vertical {
	    padding: 0 0 0 35px;
	}
	.van-step {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    font-size: 14px;
	    position: relative;
	    color: #969799;
	}
	.van-step--vertical {
	    float: none;
	    display: block;
	    font-size: 14px;
	    line-height: 18px;
	    padding: 10px 10px 10px 0;
	}
	.van-step--vertical:first-child::before {
	    content: '';
	    position: absolute;
	    width: 1px;
	    height: 20px;
	    background-color: #fff;
	    top: 0;
	    left: -15px;
	    z-index: 1;
	}
	.van-step--vertical {
	    float: none;
	    display: block;
	    font-size: 14px;
	    line-height: 18px;
	    padding: 10px 10px 10px 0;
	}
	.van-step--vertical .van-step__line {
	    position: absolute;
	    top: 0;
	    left: -15px;
	    width: 1px;
	    height: 100%;
	    background-color: #ebedf0;
	}
	[class*='van-hairline']::after {
	    content: ' ';
	    position: absolute;
	    pointer-events: none;
	    box-sizing: border-box;
	    top: -50%;
	    left: -50%;
	    right: -50%;
	    bottom: -50%;
	    -webkit-transform: scale(0.5);
	    transform: scale(0.5);
	    border: 0 solid #ebedf0;
	}
	.van-step--vertical:not(:last-child)::after {
	    border-bottom-width: 1px;
	}
	.van-icon {
	    position: relative;
	    display: inline-block;
	    font: normal normal normal 14px/1 "mintui";
	    font-size: inherit;
	    text-rendering: auto;
	    -webkit-font-smoothing: antialiased;
	}
	.van-steps .van-icon {
	    font-size: 40px;
	}
	.van-step--vertical .van-step__circle-container > i {
	    position: absolute;
	    z-index: 2;
	}

	.van-step--vertical.van-step--process .van-icon-checked {
	    top: 12px;
	    left: -20px;
	    line-height: 1;
	    font-size: 12px;
	}
	.van-icon::before {
	    display: inline-block;
	}
	.van-icon-checked:before {
	    content: "\e602";
	}

	.van-step .van-step__circle {
	    display: block;
	    width: 5px;
	    height: 5px;
	    border-radius: 50%;
	    background-color: #969799;
	}
	.van-step--vertical .van-step__circle {
	    top: 16px;
	    left: -17px;
	}
	.van-step--vertical .van-step__circle-container > i {
	    position: absolute;
	    z-index: 2;
	}
	.van-step__title .description {
		font-size: 10px;
	}
	.logistic-item-info {
		margin-top: 4px;
	}
	.no-logistic-tip {
		padding: 10px;
		background: #fff;
	}
</style>